<template>
	<image v-if="props.mchImg" :src="props.mchImg" mode="widthFix"></image>
	<template v-else-if="props.mcc && props.mcc instanceof Array && props.mcc.length > 1">
		<image v-if="props.mcc[0] == 1" src="@/static/svg/mch-default-img1.svg" mode="widthFix"></image>
		<image v-else-if="props.mcc[0] == 2" src="@/static/svg/mch-default-img2.svg" mode="widthFix"></image>
		<image v-else-if="props.mcc[0] == 3" src="@/static/svg/mch-default-img3.svg" mode="widthFix"></image>
		<image v-else-if="props.mcc[0] == 4" src="@/static/svg/mch-default-img4.svg" mode="widthFix"></image>
		<image v-else-if="props.mcc[0] == 5" src="@/static/svg/mch-default-img5.svg" mode="widthFix"></image>
		<image v-else src="@/static/svg/mch-default-img1.svg" mode="widthFix"></image>
	</template>
	<image v-else src="@/static/svg/mch-default-img1.svg" mode="widthFix"></image>
</template>

<script setup>
	import { defineProps, defineOptions } from 'vue'
	
	const props =  defineProps({
		mchImg: {
			type: String,
			default: ''
		},
		mcc:{
			type: Array,
			default: () => []
		},
		attrs: {
			type: Object,
			default: () => ({})
		}
	})
	
	defineOptions({
		options: { virtualHost: false }
	})
</script>
<style lang="less" scoped>
	image{
		width: 100%;
		height: 100%;
		vertical-align: -4px;
	}
</style>